<template>
	<div>
			<!-- 搜索 -->
			<el-form :model="queryParams" ref="queryForm" :inline="true" >
					<el-form-item label="日期:" prop="createTime">
							<el-date-picker v-model="indatetime" :clearable="false" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" 	value-format="timestamp"/>
					</el-form-item>
					<el-form-item>
							<el-button icon="el-icon-search" type="primary"   @click="handleQuery">查询</el-button>
							<el-button icon="el-icon-refresh"  @click="resetQuery">重置</el-button>
							<el-button icon="el-icon-download" type="warning"  @click="handleExport">导出</el-button>
							<!-- <el-button  type="danger"   @click="back">返回</el-button> -->
					</el-form-item>
			</el-form>
			<p>姓名:{{this.Title}}, 地址:{{this.Address}}</p>
			<el-table v-loading="loading" :data="peopList" border highlight-current-row style="width: 100%"  ref="tableData"
							tooltip-effect="dark" :header-cell-style="{ background: '#EEF3FF', color: '#333333' }">
					<el-table-column type="index" label="序号" align="center" width="60"/>
					<el-table-column  prop="cardname"  label="姓名" ></el-table-column>
					<el-table-column  prop="image"  label="照片" >
						 <template slot-scope="scope">
								<img :src="scope.row.image" style="height:50px;" alt="">
						 </template>
					</el-table-column>
					<el-table-column  prop="temperature"  label="体温" width="100"></el-table-column>
          <el-table-column  prop="createTime"  label="时间" :formatter="dateFormat"/>
					<el-table-column  prop="address"  label="地址" ></el-table-column>
					<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="220px">
							<template slot-scope="{row}">
									<el-button  type="text" @click="hanleEquiment(row)">
										查看设备
									</el-button> 
									<el-button  type="text" @click="peopleContact(row)">
										查看人员
									</el-button>
							</template>
					</el-table-column>
			</el-table>
			<div class="fenye">
					<el-pagination :current-page="currentPage" :page-sizes="[5, 10, 15, 20]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
			</div>

	</div>
</template>

<script>
import { formatDate } from '@/utils'//导出Excel时间解析

	export default {
	   components: {},
	   props: [],
		data() {
			return {
				loading: false,
				total: 0,
				currentPage: 1,
				peopList:[],//人员列表
        userListAll:'',
				queryParams: {
					start: undefined,
					end: undefined,//日期
				},
				page: 1,
				pageSize: 5,
				indatetime:[new Date(new Date().toLocaleDateString()).getTime(),new Date ().getTime ()],//搜索时间区间
				Title:'',//姓名
				id:'',//id
				Address:'',//地址
			};
		},
    created(){
				this.id = this.$route.params.row.id//id接口传
				this.Title = this.$route.params.row.cardname//姓名展示
				this.Address = this.$route.params.row.address//姓名展示
				this.getList()
		},
		mounted(){},
		methods: {
			//时间格式化
				dateFormat:function(row,column){
						var t=new Date(row.createTime);//row 表示一行数据, updateTime 表示要格式化的字段名称
						return t.getFullYear()+"-"+(t.getMonth()+1)+"-"+t.getDate()+" "+t.getHours()+":"+t.getMinutes()+":"+t.getSeconds();
				},
      	/** 搜索按钮操作 */
				handleQuery() {
					this.total = 1;
					this.queryParams.page = 1;
					this.getList();
				},
				/** 重置按钮操作 */
				resetQuery() {
					this.queryParams = {
						start: undefined,
						end: undefined,//日期
					},
					this.indatetime = [new Date(new Date().toLocaleDateString()).getTime(),new Date ().getTime ()],//搜索时间区间
					this.handleQuery();
				},
			getList(){//详情
					if (this.indatetime) {//搜索时间区间
						this.queryParams.start = parseInt( (this.indatetime[0])/1000);
						this.queryParams.end = parseInt( (this.indatetime[1])/1000) ;
					}
					let id = this.id
					// this.loading = true;
					let url = '/monitor/Sys/sn/getCard?id='+id+'&start='+this.queryParams.start+'&end='+	this.queryParams.end
				  this.axios.get(url).then(response => {
							this.peopList = response.data.data;
							this.userListAll=response.data.data
							this.peopList=this.userListAll.slice((this.page-1)*this.pageSize,this.page*this.pageSize)
							this.total=this.userListAll.length
							// this.loading = false;
					});

			},
			hanleEquiment(row){//人员关联-接触者
				let id = row.id
				console.log(id,'行id');
				let url = '/monitor/Sys/sn/getData?id='+id+'&start='+this.queryParams.start+'&end='+	this.queryParams.end
				this.axios.get(url).then(response => {
					console.log(response,'接口返回');
						this.peopList = response.data.data;
						this.userListAll=response.data.data
						this.peopList=this.userListAll.slice((this.page-1)*this.pageSize,this.page*this.pageSize)
						this.total=this.userListAll.length
				});
			},
			peopleContact(row){//人员关联-接触者 -和人员接口一样
				let id = row.id
				console.log(id,'行id');
				let url = '/monitor/Sys/sn/getCard?id='+id+'&start='+this.queryParams.start+'&end='+	this.queryParams.end
				this.axios.get(url).then(response => {
						this.peopList = response.data.data;
						this.userListAll=response.data.data
						this.peopList=this.userListAll.slice((this.page-1)*this.pageSize,this.page*this.pageSize)
						this.total=this.userListAll.length
				});
			},
			 handleSizeChange(val) {//分页
            this.pageSize = val;
            this.peopList=this.userListAll.slice((this.page-1)*this.pageSize,this.page*this.pageSize)
            this.total=this.userListAll.length
        //   this.getList();
        },
        handleCurrentChange(val) {//分页
            this.page = val;
            this.peopList=this.userListAll.slice((this.page-1)*this.pageSize,this.page*this.pageSize)
            this.total=this.userListAll.length
        //   this.getList();
        },
			handleExport() {
					const Title = this.Title
					console.log(Title,'Title')
					import('@/vendor/Export2Excel').then(excel => {
							const tHeader =  ['姓名','体温','时间','地址',]
              const filterValue =['cardname','temperature','createTime','address',]
							let Data = this.peopList
							const list = Data;
							const data = this.formatJson(filterValue, list);
							excel.export_json_to_excel({
									header: tHeader,
									data,
									filename:Title +'设备下人员信息'
							})
					});
			},
			formatJson(filterVal,jsonData) {
				return jsonData.map(v => filterVal.map(j => {
					if (j === 'createTime') {
						return formatDate(v[j])//时间解析出来了具体的几点几分
					} else {
						return v[j]
					}
						//  return v[j]//没有解析时间返回的是那一天
				}))
			},
		// 	back(){
      	// this.$router.go(-1);
		// 	}
		},

	}
</script>